import React, { Component } from "react";
import { Link } from "react-router-dom";
import { platform_search, platform_update } from "../../api/loading_area";
import { EditOutlined } from "@ant-design/icons";
import {
  message,
  Breadcrumb,
  Card,
  Table,
  Modal,
  Button,
  Pagination,
  Form,
  Input,
} from "antd";
const { Item } = Form;

export default class LoadingArea extends Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }
  state = {
    //请求参数
    pagenum: 1,
    pagesize: 3,
    loadingAreaList: [],
    loading: false,
    total: 0,
    editVisible: false,
    editData: {},
    id: "",
    enable: false,
    visible: false,
  };

  //获取装卸区列表数据
  getLoadingAreaList = async () => {
    const { pagenum, pagesize } = this.state;
    const paramsInfo = {
      pagenum: pagenum,
      pagesize: pagesize,
    };
    this.setState({ loading: true });
    try {
      let { data: res } = await platform_search(paramsInfo);
      this.setState({ loading: false });
      if (res && res.code === 200) {
        const loadingAreaList = res.data.current_page_data;
        const total = res.data.data_sum;
        this.setState({
          loadingAreaList,
          total,
        });
      } else {
        message.error(res.message);
      }
    } catch (err) {
      message.error("连接失败，请检查网络");
    }
  };
  //分页(页码)
  pagenumChange = (pagenum) => {
    this.setState({ pagenum }, () => {
      this.getLoadingAreaList();
    });
  };
  pagesizeChange = (current, pagesize) => {
    console.log(pagesize);
    this.setState({ pagesize }, () => {
      this.getLoadingAreaList();
    });
  };
  //编辑
  showEdit = (row) => {
    this.setState({}, () => {
      this.setState({
        editVisible: true,
        editData: row,
        id: row.id,
      });
    });
    setTimeout(() => {
      this.formRef.current.setFieldsValue(row);
    }, 100);
  };
  thresholdEdit = () => {
    const { id } = this.state;
    try {
      this.formRef.current
        .validateFields()
        .then(async (value) => {
          const newValue = {
            ...value,
            id: id,
          };
          let { data: res } = await platform_update(newValue);
          if (res && res.code === 200) {
            message.success(res.message);
            this.setState({
              editVisible: false,
            });
            this.getLoadingAreaList();
          } else {
            message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    } catch (err) {
      message.error("连接失败，请检查网络");
    }
  };
  handleCancel = () => {
    this.setState({
      editVisible: false,
    });
  };

  componentDidMount() {
    this.getLoadingAreaList();
  }
  componentDidUpdate() {
    // console.log(this.formRef.current);
  }
  render() {
    const { loading, loadingAreaList, pagenum, pagesize, total, editVisible } =
      this.state;

    const columns = [
      {
        title: "装卸区编码",
        dataIndex: "plat_mark",
        align: "center",
      },
      {
        title: "装卸区名称",
        dataIndex: "plat_name",
        align: "center",
      },
      {
        title: "装卸位数量",
        dataIndex: "park_num",
        align: "center",
      },
      {
        title: "备注信息",
        dataIndex: "des",
        align: "center",
      },
      {
        title: "操作",
        fixed: "right",
        width: 100,
        align: "center",
        render: (row) => {
          return (
            <div>
              <Button
                onClick={() => {
                  this.showEdit(row);
                }}
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
              />
            </div>
          );
        },
      },
    ];
    return (
      <div className="load_area">
        {/* {面包屑导航区域} */}
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/">Admin</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>主数据管理</Breadcrumb.Item>
          <Breadcrumb.Item>装卸区管理</Breadcrumb.Item>
        </Breadcrumb>

        <Card>
          <Table
            rowKey="id"
            bordered
            loading={loading}
            dataSource={loadingAreaList}
            columns={columns}
            pagination={false}
          />
          <Pagination
            style={{ marginTop: "25px" }}
            current={pagenum}
            total={total}
            pageSize={pagesize}
            pageSizeOptions={["1", "2", "5", "10"]}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `共 ${total} 条`}
            onChange={(pagenum) => this.pagenumChange(pagenum)}
            onShowSizeChange={(current, pagesize) =>
              this.pagesizeChange(current, pagesize)
            }
          />

          {/* 编辑对话框 */}
          <Modal
            title="编辑"
            okText="确定"
            cancelText="取消"
            visible={editVisible}
            onOk={() => this.thresholdEdit()}
            onCancel={this.handleCancel}
          >
            <Form
              name="normal_login"
              className="login-form"
              //   ref={(c) => (this.editformDate = c)}
              ref={this.formRef}
              initialValues={{ remember: true }}
              labelCol={{
                span: 6,
              }}
              wrapperCol={{
                span: 15,
              }}
            >
              <Item
                label="装卸区编码"
                name="plat_mark"
                rules={[{ required: true, message: "装卸区编码不能为空" }]}
              >
                <Input disabled />
              </Item>
              <Item
                label="装卸区名称"
                name="plat_name"
                rules={[{ required: true, message: "装卸区名称不能为空" }]}
              >
                <Input disabled />
              </Item>

              <Item
                label="装卸位数量"
                name="park_num"
                rules={[{ required: true, message: "装卸位数量不能为空" }]}
              >
                <Input />
              </Item>

              <Item
                label="备注信息"
                name="des"
                rules={[{ required: true, message: "备注信息不能为空" }]}
              >
                <Input />
              </Item>
            </Form>
          </Modal>
        </Card>
      </div>
    );
  }
}
